<!--
 * @Author: DeluxePig
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-06-16 13:52:40
 * @LastEditTime: 2024-06-26 00:49:57
 * @Description: 消息中心/添加问答
-->
<template>
  <div class="news-container">
    <div class="form-head-box">添加问答</div>
    <div class="list-box">
      <div class="list-head">选择模型</div>
      <div class="list-con">
        <el-select v-model="requestData.model_uniqueid" class="z-select" filterable placeholder="请选择">
          <el-option v-for="item in modelOptions" :key="item.model_uniqueid" :label="item.title"
            :value="item.model_uniqueid" />
        </el-select>
      </div>
    </div>
    <div class="list-box">
      <div class="list-head">问题</div>
      <div class="list-con">
        <textarea v-model="requestData.question" class="z-input" placeholder="请输入问题" rows="4"></textarea>
      </div>
    </div>
    <div class="list-box">
      <div class="list-head">答案</div>
      <div class="list-con">
        <textarea v-model="requestData.answer_text" class="z-input" placeholder="请输入答案" rows="4"></textarea>
      </div>
    </div>
    <div class="list-box">
      <div class="list-head">答案附件</div>
      <div class="list-con list-con-noboder">
        <el-radio v-model="requestData.attachment_type" :label="0">链接</el-radio>
        <el-radio v-model="requestData.attachment_type" :label="1">图片</el-radio>
      </div>
    </div>
    <div v-if="requestData.attachment_type === 0" class="list-box">
      <div class="list-head">上传链接</div>
      <div class="list-con">
        <input v-model="requestData.attachment_payload" class="z-input" type="text" placeholder="请输入链接地址" />
      </div>
    </div>
    <div v-else class="list-box">
      <div class="list-head">上传图片</div>
      <div class="list-con list-con-noboder">
        <UpImage :url="''" @getImg="getImg" />
      </div>
    </div>
    <div class="list-box">
      <div class="list-head">上传视频</div>
      <div class="list-con list-con-noboder">
        <UpVideoFile :url="''" @getFile="getFile" />
      </div>
    </div>
    <div class="btn-box">
      <el-button class="btn" @click="cancel()">取消</el-button>
      <el-button class="btn" type="primary" @click="creatFaq()">确认</el-button>
    </div>
  </div>
</template>

<script>
import { creatMediaApi } from '@/api/faq'
import { getList } from '@/api/model'
import UpImage from '@/components/upload/up-image.vue'
import UpVideoFile from '@/components/upload/up-video-file.vue'
export default {
  components: {
    UpImage,
    UpVideoFile
  },
  data() {
    return {
      newsmodelData: {},
      // 模型select选择
      modelOptions: [],
      // 创建参数
      requestData: {
        model_uniqueid: '',
        question: '',
        answer_text: '',
        generate_switch: 0,
        attachment_type: 0,
        attachment_payload: '',
        answer_media_file: null
      }

    }
  },
  created() {
    this.getParms()
    this.getModelList()
  },
  methods: {
    getParms() {
      const query = JSON.parse(this.$route.query.data)
      this.newsmodelData = query
      this.requestData.question = query.query
      this.requestData.answer_text = query.nlp_content
    },
    // 获取模型列表
    getModelList() {
      const data = {
        key: ''
      }
      getList(data).then((res) => {
        this.modelOptions = res.data
        if (res.data.length > 0) {
          this.requestData.model_uniqueid = res.data[0].model_uniqueid
        }
      })
    },
    creatFaq() {
      if (this.requestData.question === '' || this.requestData.answer_text === '' || this.requestData.answer_media_file === null) {
        this.$message({
          message: '请完善问题、答案内容，并上传视频',
          type: 'warning'
        })
        return false
      }

      const formData = new FormData()
      formData.append('model_uniqueid', this.requestData.model_uniqueid)
      formData.append('question', this.requestData.question)
      formData.append('answer_text', this.requestData.answer_text)
      formData.append('generate_switch', this.requestData.generate_switch)
      formData.append('attachment_type', this.requestData.attachment_type)
      formData.append('attachment_payload', this.requestData.attachment_payload)
      formData.append('answer_media_file', this.requestData.answer_media_file)
      creatMediaApi(formData).then((res) => {
        this.$message({
          message: '创建成功！',
          type: 'success'
        })
        this.$router.go(-1)
      })
    },
    getImg(url) {
      this.requestData.attachment_payload = url
    },
    getFile(file) {
      this.requestData.answer_media_file = file.raw
    },
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.news-container {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 32px 150px;
  overflow-y: auto;

  .form-head-box {
    border-left: 3px solid #04d1b8;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #1c1f23;
    line-height: 23px;
    text-align: left;
    padding-left: 10px;
    margin-bottom: 22px;
  }

  .list-box {
    width: 100%;
    margin: 10px 0;
    max-width: 1000px;

    .list-head {
      font-size: 14px;
      color: #1C1F23;
      line-height: 30px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 700;
    }

    .list-con {
      width: 100%;
      height: auto;
      min-height: 32px;
      border: 1px solid #E0E0E0;
      border-radius: 3px;

      .z-input {
        width: 100%;
        height: 100%;
        padding-left: 5px;
        border: 0;
        outline: none;
        font-size: 14px;
      }
    }

    .list-con-noboder {
      border: 0;
    }
  }

  .btn-box {
    width: 100%;
    text-align: center;

    .btn {
      margin: 0 20px;
    }
  }
}
</style>
